<template>
	<div class="container">
		<!-- 主导航栏 -->
		<ul class="main-tabs clearfix">
			<li v-for="(item,index) in mainTabs.data" :key="index" :class="{active:index==mainTabs.index}"
				@click="mainTabSwitch(index)">{{item.title}}</li>
		</ul>

		<!-- 头部信息 -->
		<h3 class="header-title clearfix">
			<span></span>
			<p>{{headerTitle}}</p>
		</h3>

		<!-- 副导航栏 -->
		<div class="search">


			<el-input v-model="searchKey" placeholder="请输入关键字查询" style="width:230px;margin-top:20px"></el-input>
			<el-button type="primary" @click="getDataList()">查询</el-button>
			<span class="toolBtn" @click="exportExcle(mainTabs.index)">导出</span>
			<span class="toolBtn" v-show="mainTabs.index==1" @click="openDialog('库存添加')">添加</span>

		</div>
		<!-- 数据展示的列表 -->
		<comTable :options="tableList" @openConDialog="openContractDialog" @opendetail="opendetail" @receive="receive"
			@openErcodeDialog="openErcodeDialog"></comTable>
		<!-- 分页器 -->
		<div class="pageBox">
			<el-pagination @size-change="handleSizeChange" @current-change="pageChange" :current-page.sync="cur"
				:page-sizes="[10, 20, 30, 50, 100]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="totalNum" background></el-pagination>
		</div>
		<!-- 发送/审核/查看模板 -->
		<contractDialog :options="contract" @clickReject="clickReject" @subContract="subContract"></contractDialog>

		<el-dialog :visible.sync="addShow" width="35%" :before-close="handleClose" top="25vh">
			<h3 class="titles">{{titleDia}}</h3>
			<div class="content" v-show="titleDia=='库存添加'">
				<el-form ref="form" :model="countForm" label-width="80px">
					<el-form-item label="活动名称">
						<el-select v-model="materialsName" multiple filterable allow-create default-first-option
							style="width: 320px;" placeholder="请选择或者输入">
							<el-option v-for="item in nameList" :key="item" :label="item"
								:value="item">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="数量">
						<el-input v-model="countForm.materialsStock" type="number" style="width: 320px;"></el-input>
					</el-form-item>

				</el-form>
				<p class="submite" @click="submiteMaterials">确认</p>
			</div>
			<div class="content" v-show="titleDia=='明细记录'">
				<!-- <comTable :options="tableDtail"></comTable> -->


				<el-table :data="tableDtail.data" style="width: 100%">
					<el-table-column prop="materialsName" label="类型"  >
					</el-table-column>
					<el-table-column prop="materialsStock" label="数量"  >
						<template slot-scope="scope">
							<span :style="{color:getColorByNation(scope)}">{{scope.row.materialsStock}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="insertdate" label="日期" >
					</el-table-column>
				</el-table>


			</div>
			<div class="content" v-show="titleDia=='领用'">
				<el-form ref="form" :model="countForm" label-width="80px">
					<el-form-item label="领用人">
						<el-input v-model="receiveUsername" style="width: 320px;"></el-input>
					</el-form-item>

					<el-form-item label="数量">
						<el-input v-model="receiveCount" type="number" style="width: 320px;"></el-input>
					</el-form-item>

				</el-form>
				<p class="submite" @click="submiteMaterials">确认</p>
			</div>
			<div class="content" v-show="titleDia=='二维码'">
				<div class="qrcode" id="qrcode" ref="qrCodeUrl"></div>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import QRCode from 'qrcodejs2'
	export default {

		components: {
			comNavTabs: () => import("@/household/common/comNavTabs.vue"),
			comTable: () => import("@/household/common/comTable.vue"),
			contractDialog: () => import("@/component/contract/contractDialog.vue")
		},
		data() {
			return {
				receiveUsername: '',
				receiveCount: '',
				countForm: {
					materialsName: '',
					materialsStock: '',


				},
				titleDia: '库存添加',
				materialsName: [],
				desption: [],
				addShow: false,
				inventory: [],
				/* 主导航栏列表数据 */
				mainTabs: {
					index: 0, //当前是在哪个tab栏
					data: [{
							title: '数据概览'
						},
						{
							title: '库存管理'
						},
						// {title:'审核人认证'}
					]
				},
				searchKey: '',
				headerTitle: '电子合同认证', //头部标题
				/* 副导航栏列表数据 */
				navList: {
					index: 0, //当前是在哪个tab栏
					data: [

					]
				},
				tableDtail: {
					list: [{
							title: '类型',
							prop: 'materialsName',
							isClick: false
						},
						{
							title: '数量',
							prop: 'materialsStock',
							isClick: true,

						},
						{
							title: '日期',
							prop: 'insertdate',
							isClick: false
						},


					],
					data: []
				},
				/* 表格数据 */
				tableList: {
					list: [{
							title: '名称',
							prop: 'materialsName',
							isClick: false
						},
						{
							title: '库存',
							prop: 'materialsStock',
							isClick: false
						},
						{
							title: '发放量',
							prop: 'materialsConsumption',
							isClick: false
						},
						{
							title: '点击次数',
							prop: 'materialsOpen',
							isClick: false
						},
						{
							title: '注册人数',
							prop: 'materialsRegister',
							isClick: false
						},
						{
							title: '启始日期',
							prop: 'materialsStart',
							isClick: false
						},
						{
							title: '领用人员',
							prop: 'personName',
							isClick: false
						},
					],
					noOperation: true, //是否有操作项
					operation: [ //操作项内容
						{
							name: '明细记录',
							isBtn: false,
							title: 'opendetail'
						},
						{
							name: '领用',
							isBtn: false,
							title: 'receive'
						},
						{
							name: '二维码',
							isBtn: false,
							title: 'openErcodeDialog'
						}
					],
					data: []
				},
				/* 电子合同数据 */
				contract: {
					lookPDFDialog: false, //电子合同发送/查看模板
					btnTextl: '资料驳回', //按钮左内容
					btnTextr: '确认发送完成', //按钮右内容
					companyTitle: '上海天都人力资源有限公司', //企业名称
					data: {
						agentName: '', //敲章人姓名
						agentTelnum: '', //敲章人手机号
						auditName: '', //审核人姓名
						auditTelnum: '', //审核人手机号
						applicationFormUrl: '', //证书申请表pdf
						authorizationUrl: '', //委托书pdf
						auditorAttorneyUrl: '', //审核人pdf
						businessLicenseUrl: '', //企业营业执照照片
						agentIdCardUrl: '', //法人身份证复印件照片
						corporateIdentityCardUrl: '', //敲章人身份证照片
						auditorCardCopiesUrl: '', //审核人身份证照片
					},

					textarea: '', //驳回理由
					isContract: true, //当前是否显示三张照片
					agentShow: false, //是否显示敲章人信息
					auditShow: false, //是否显示审核人信息
					showBtn: false, //是否展示按钮栏和驳回理由
					showTextarea: false, //是否展示驳回理由框
					placeholder: '', //占位符含义
					tableData: [
						/* {
							applyTime: '2016-05-02',					//申请时间
							createTime: '2016-05-02',					//审核时间
							operator: '王小虎',							//操作人
							auditResult: '未通过',						//审核结果
							cause: '资料不全',							//备注	
						} */
					]
				},

				receives: {},
				/* 分页功能数据 */
				cur: 1,
				pageSize: 10,
				totalNum: 0, //总共有多少条数据,根据这个数据去适配页数
				nameList:[],
			}
		},
		created() {
			this.getName()
			this.getDataList();
			this.mainTabSwitch(0)
		},




		methods: {
			getColorByNation(scope, opt) {
				if (scope.row.materialsStock < 0) {
					console.log(22223);
					return "#ff051e"
				} else if (scope.row.materialsStock > 0) {
					return "#409Eff"
				}
			},
			exportExcle(index) {
				let data = {
					searchKey: this.searchKey
				}
				// let url = 'http://192.168.0.201:8082/v1/platform/statistic/stockOverviewOut'
				let url = 'https://fcapp.fcw-china.com/app/v1/platform/statistic/stockOverviewOut'
				if (index == 0) {
					// url = 'http://192.168.0.201:8082/v1/platform/statistic/stockOverviewOut'
					url = 'https://fcapp.fcw-china.com/app/v1/platform/statistic/stockOverviewOut'
					
				} else if (index == 1) {
					// url = 'http://192.168.0.201:8082/v1/platform/statistic/stockControlOut'
					url = 'https://fcapp.fcw-china.com/app/v1/platform/statistic/stockControlOut'
					
				}

				this.$axios({
						url: url,
						method: "get",
						responseType: "blob",
						params: data
					})
					.then((res) => {
						console.log(res);
						var blob = new Blob([res.data]);
						var downloadElement = document.createElement("a");
						var href = window.URL.createObjectURL(blob); //创建下载的链接
						downloadElement.href = href;
						downloadElement.download = `数据概览表.xls`;
						if (index == 1) {
							downloadElement.download = `库存管理.xls`;
						}
						document.body.appendChild(downloadElement);
						downloadElement.click(); //点击下载
						this.$message({
							type: "success",
							message: "下载成功！",
						});
						document.body.removeChild(downloadElement); //下载完成移除元素
						window.URL.revokeObjectURL(href); //释放掉blob对象
					})

			},
			getName(){
				
				let params = {
					searchKey: '',
					pageNum: 1,
					pageSize: 999
				};
				
				 
				// this.mainTabs.index == 2?params.status = this.navList.index + 9: '';
				this.$ceshiGetAxios('v1/extension/queryStockOverview', params).then(res => {
					let datas  = res.data.data.materialsInformationVoList
					datas.forEach(item=>{
						this.nameList.push(item.materialsName)
					})
				})
				
			},
			createdQr(data) {
				var qrcode = new QRCode('qrcode', {
					text: 'https://share.fcw-china.com/share.html?type=1&status='+data.materialsName, // 需要转换为二维码的内容
					width: 300,
					height: 300,
					colorDark: '#000000',
					colorLight: '#ffffff',
					correctLevel: QRCode.CorrectLevel.H
				})
			},

			openErcodeDialog(data) {
				console.log(data);
				this.openDialog('二维码')
				// let qr = document.querySelector('.qrcode')
				// console.log(qr);
				this.$nextTick(() => {

					let qrcodeEL = document.getElementById("qrcode");
					let qrcode = new QRCode(qrcodeEL);
					document.getElementById("qrcode").innerHTML = "";
					this.createdQr(data)
				})
			},
			openDialog(data) {
				this.addShow = true
				this.titleDia = data
			},
			opendetail(data) {
				console.log(data);
				this.openDialog('明细记录')
				let datas = {
					id: data.id
				}
				this.$ceshiGetAxios('v1/extension/detailRecord', datas).then(res => {
					this.tableDtail.data = res.data.data
				})
			},
			receive(data) {
				console.log(data);
				this.openDialog('领用')
				this.receives = data
			},
			receiveSubmite() {
				let datas = {
					version: this.receives.version,
					personName: this.receiveUsername,
					materialsStock: this.receiveCount,
					id: this.receives.id

				}
				this.$flexibleAxios.post('v1/extension/allocationStock', datas).then(res => {
					if (res.data.code == 1) {
						this.$message.success('操作成功！！')
						this.getDataList()
						this.addShow = false
					} else {
						this.$message.error(res.data.message)
					}
				})
			},

			submiteMaterials() {
				if (this.titleDia == '库存添加') {
					this.countForm.materialsName = this.materialsName[0]
					this.$flexibleAxios.post('v1/extension/insertActivity', this.countForm).then(res => {
						if (res.data.code == 1) {
							this.$message.success('操作成功！！')
							this.addShow = false
							this.getDataList()
							this.mainTabSwitch(1)
						} else {
							this.$message.error(res.data.message)
						}
					})
				} else if (this.titleDia == '领用') {
					this.receiveSubmite()
				}



			},


			// 主tab栏切换
			handleClose() {
				this.addShow = false

			},
			mainTabSwitch(index) {
				console.log(index);
				this.mainTabs.index = index;
				index == 0 ? this.headerTitle = "数据概览" : '';
				index == 1 ? this.headerTitle = "库存管理" : '';
				// index==2?this.headerTitle="审核人认证":'';
				this.cur = 1;
				this.pageSize = 10;
				if (index == 1) {
					this.tableList.noOperation = true
					this.tableList.list = [{
							title: '名称',
							prop: 'materialsName',
							isClick: false
						},
						{
							title: '生产总量',
							prop: 'sumStock',
							isClick: false
						},
						{
							title: '发放量',
							prop: 'materialsConsumption',
							isClick: false
						},
						{
							title: '库存量',
							prop: 'materialsStock',
							isClick: false
						},
						{
							title: '启始日期',
							prop: 'materialsStart',
							isClick: false
						},
						{
							title: '领用人员',
							prop: 'personNames',
							isClick: false
						},
					]

				} else {
					this.tableList.noOperation = false
					this.tableList.list = [{
							title: '名称',
							prop: 'materialsName',
							isClick: false
						},
						{
							title: '库存',
							prop: 'materialsStock',
							isClick: false
						},
						{
							title: '发放量',
							prop: 'materialsConsumption',
							isClick: false
						},
						{
							title: '点击次数',
							prop: 'materialsOpen',
							isClick: false
						},
						{
							title: '注册人数',
							prop: 'materialsRegister',
							isClick: false
						},
						{
							title: '启始日期',
							prop: 'materialsStart',
							isClick: false
						},
						{
							title: '领用人员',
							prop: 'personNames',
							isClick: false
						},
					]

				}

			},

			// 获取数据列表
			getDataList(index) {
				let params = {
					searchKey: this.searchKey,
					pageNum: this.cur,
					pageSize: this.pageSize
				};

				let url = 'v1/extension/queryStockOverview'
				if (index == 1) {
					url = 'v1/extension/detailRecord'
				}
				// this.mainTabs.index == 2?params.status = this.navList.index + 9: '';
				this.$ceshiGetAxios('v1/extension/queryStockOverview', params).then(res => {
					console.log(res);
					if (res.data.code === 1) {
						this.tableList.data.splice(0);
						let result = res.data.data;

						this.tableList.data = result.materialsInformationVoList
						
						this.tableList.data.forEach(item => {
							if (item.personName.length > 0) {
								item.personName.forEach(data => {
									item.personNames += data + '\n'
								})
								item.personNames = item.personNames.substring(9)
							}
						})

						this.totalNum = Math.abs(result.total);
					} else {
						this.$message({
							message: res.data.message,
							type: 'warning'
						})
					}
				})
			},
			// 打开电子合同模板
			openContractDialog(data) {

			},
			// 点击驳回或者取消按钮
			clickReject() {
				if (!this.contract.showTextarea) {
					this.contract.showTextarea = true;
					this.contract.btnTextl = '取消';
					this.contract.btnTextr = '确定';
					if (this.current == '0') {
						this.contract.placeholder = '驳回理由';
					} else {
						this.contract.placeholder = '未通过理由';
					}
				} else {
					this.contract.showTextarea = false;
					if (this.current == '0') {
						this.contract.btnTextl = '资料驳回';
						this.contract.btnTextr = '确认发送完成';
					} else {
						this.contract.btnTextl = '审核未通过';
						this.contract.btnTextr = '审核通过';
					}
				}
			},
			// 提交电子合同认证资料
			subContract() {
				let params = {};
				if (this.mainTabs.index == 0) {
					params.type = '1';
				} else if (this.mainTabs.index == 1) {
					params.type = '2';
				} else {
					params.type = '3';
				}
				if (this.contract.showTextarea) {
					if (!this.contract.textarea) {
						this.$message({
							message: '理由不能为空！',
							type: 'warning'
						})
						return false;
					} else {
						params.status = '3';
						params.cause = this.contract.textarea;
					}
				} else {
					if (this.navList.index == '0' && this.mainTabs.index != 2) {
						params.send = '1';
					} else if ((this.navList.index == '1' && this.mainTabs.index != 2) || (this.navList.index == '0' &&
							this.mainTabs.index == 2)) {
						params.status = '2';
					}
				}
				params.operator = JSON.parse(localStorage.getItem('userinfo')).username;
				params.companyId = this.contract.data.companyId;
				console.log(params);
				//https://house.fcw-china.com
				this.$eleconAxios.post('/electronic/dajiqqian/updateCompanyAuth', params).then(res => {
					console.log(res);
					if (res.data.code === 1000) {
						this.$message({
							message: '操作成功！',
							type: 'success'
						})
						this.contract.textarea = '';
						this.getDataList();
					} else {
						this.$message({
							message: res.data.message,
							type: 'success'
						})
					}
				})
				this.contract.lookPDFDialog = false;

			},

			//当前页是第几页,点击的第几页的时候调用这个函数
			pageChange(p) {
				// 点击的时候传过来一个参数，这个参数就是所点击的当前页数，
				// 然后把这个当前页数转换成字符串形式赋值给page，
				// 然后把page这个参数传给search这个方法
				console.log(p);
				this.cur = p;
				this.getDataList();
			},
			//每页有多少条,10,20,50等,点击选择的时候调用这个方法
			handleSizeChange(val) {
				console.log(val);
				this.pageSize = val;
				this.getDataList();
			},
		}
	}
</script>

<style scoped="scoped">
	.container {
		background-color: #fff;
		height: 100%;
		padding-left: 20px;
	}

	.main-tabs {
		background-color: #EFF1F8;
		margin-bottom: 20px;
		margin-left: -20px;
		padding-left: 50px;
	}

	.main-tabs li {
		height: 40px;
		line-height: 40px;
		float: left;
		margin: 10px 20px;
		padding: 0 30px;
	}

	.main-tabs .active {
		background: #0064E4;
		border-radius: 20px;
		color: #fff;
	}

	.header-title {
		padding: 0 0 20px 0;
		border-bottom: 1px solid #D2D2D2;
	}

	.header-title span {
		width: 15px;
		height: 30px;
		background-color: #0064E4;
		margin-right: 20px;
		float: left;
	}

	.header-title p {
		float: left;
		font-weight: bold;
		line-height: 30px;
	}

	.pageBox {
		margin-top: 20px;
	}

	.toolBtn {
		border: 1px solid #0153EC;
		/* opacity: 1; */
		border-radius: 13px;
		color: #0153EC;
		padding: 5px 9px;
		float: right;
		margin: 24px 10px;
		cursor: pointer;
	}

	.content {
		width: 500px;
		height: auto;
		margin: 0 auto;
		padding-bottom: 28px;

	}

	.qrcode {
		margin: 0 auto;
		width: 300px;
	}

	.submite {
		background: rgba(0, 66, 244, 1);
		border-radius: 10px;
		color: white;
		text-align: center;
		width: 144px;
		margin: 0 auto;
		cursor: pointer;
		padding: 5px 0;
		font-size: 16px;
	}

	.titles {
		text-align: center;
		padding: 20px 0;
		font-size: 16px;
	}
</style>
